/**
 * 详情页面公共样式
 * 统一管理所有系统模块和监控模块详情页面的样式
 */

// 详情页面基础样式
.detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  
  // 导航栏样式
  .uni-nav-bar {
    background-color: #007aff !important;
    
    .uni-nav-bar__content {
      .uni-nav-bar__title {
        color: #ffffff !important;
        font-weight: 600;
      }
      
      .uni-nav-bar__left {
        .uni-nav-bar__left-icon {
          color: #ffffff !important;
        }
      }
      
      .uni-nav-bar__right {
        .nav-actions {
          display: flex;
          align-items: center;
          gap: 16px;
        }
      }
    }
  }
  
  // 加载状态容器
  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    background: white;
    margin: 8px;
    border-radius: 8px;
  }
  
  // 内容容器
  .content-container {
    padding: 8px;
    
    // 信息区块
    .info-section {
      background: white;
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
      
      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 16px 12px;
        background: #fafafa;
        border-bottom: 1px solid #f0f0f0;
        
        .title-text {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
      }
      
      .info-content {
        padding: 16px;
        
        .info-row {
          display: flex;
          align-items: flex-start;
          margin-bottom: 12px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .info-label {
            width: 80px;
            color: #666;
            font-size: 14px;
            flex-shrink: 0;
            margin-top: 2px;
          }
          
          .info-value {
            flex: 1;
            color: #333;
            font-size: 14px;
            word-break: break-all;
            line-height: 1.5;
            
            &.cost-time {
              color: #e83e00;
              font-family: 'Courier New', monospace;
            }
            
            &.url-text {
              color: #007aff;
              font-family: 'Courier New', monospace;
            }
            
            &.method-text {
              color: #52c41a;
              font-family: 'Courier New', monospace;
            }
          }
        }
      }
    }
    
    // 头部信息区块
    .header-section {
      background: white;
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
      
      .header-title {
        padding: 20px 16px 16px;
        border-bottom: 1px solid #f0f0f0;
        
        .title-text {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          line-height: 1.4;
        }
      }
      
      .header-meta {
        padding: 16px;
        
        .meta-row {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .meta-label {
            width: 80px;
            color: #666;
            font-size: 14px;
            flex-shrink: 0;
          }
          
          .meta-value {
            flex: 1;
            color: #333;
            font-size: 14px;
          }
          
          .meta-item {
            margin-right: 12px;
            
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
    
    // 分隔线
    .divider {
      height: 1px;
      background: #f0f0f0;
      margin: 16px 0;
    }
    
    // 正文内容区块
    .body-section {
      background: white;
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
      
      .body-title {
        padding: 16px 16px 12px;
        background: #fafafa;
        border-bottom: 1px solid #f0f0f0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      
      .body-content {
        padding: 16px;
        
        .content-display {
          .rich-content {
            line-height: 1.6;
            color: #333;
          }
          
          .text-content {
            .content-text {
              line-height: 1.6;
              color: #333;
              white-space: pre-wrap;
              word-break: break-all;
            }
          }
        }
      }
    }
    
    // 代码内容区块
    .code-section {
      background: white;
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
      
      .code-title {
        padding: 16px 16px 12px;
        background: #fafafa;
        border-bottom: 1px solid #f0f0f0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      
      .code-content {
        padding: 16px;
        background: #f8f9fa;
        
        .code-text {
          font-family: 'Courier New', monospace;
          font-size: 12px;
          color: #333;
          line-height: 1.6;
          white-space: pre-wrap;
          word-break: break-all;
        }
      }
    }
    
    // 错误内容区块
    .error-section {
      background: white;
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
      
      .error-title {
        padding: 16px 16px 12px;
        background: #fff2f0;
        border-bottom: 1px solid #ffccc7;
        font-size: 16px;
        font-weight: 600;
        color: #cf1322;
      }
      
      .error-content {
        padding: 16px;
        background: #fff2f0;
        
        .error-text {
          font-family: 'Courier New', monospace;
          font-size: 12px;
          color: #cf1322;
          line-height: 1.6;
          white-space: pre-wrap;
          word-break: break-all;
        }
      }
    }
    
    // 操作区域
    .action-section {
      background: white;
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
      
      .action-title {
        padding: 16px 16px 12px;
        background: #fafafa;
        border-bottom: 1px solid #f0f0f0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      
      .action-buttons {
        padding: 16px;
        display: flex;
        gap: 12px;
        
        .action-btn {
          flex: 1;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          border: none;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.2s ease;
          
          &.btn-primary {
            background: #1890ff;
            color: white;
            
            &:active {
              background: #096dd9;
            }
          }
          
          &.btn-danger {
            background: #ff4d4f;
            color: white;
            
            &:active {
              background: #cf1322;
            }
          }
          
          &.btn-default {
            background: white;
            color: #666;
            border: 1px solid #d9d9d9;
            
            &:active {
              background: #f5f5f5;
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .detail-page {
    .content-container {
      padding: 4px;
      
      .info-section,
      .header-section,
      .body-section,
      .code-section,
      .error-section,
      .action-section {
        .section-title,
        .header-title,
        .body-title,
        .code-title,
        .error-title,
        .action-title {
          padding: 12px 12px 8px;
          font-size: 15px;
        }
        
        .info-content,
        .header-meta,
        .body-content,
        .code-content,
        .error-content,
        .action-buttons {
          padding: 12px;
        }
        
        .info-content .info-row,
        .header-meta .meta-row {
          margin-bottom: 10px;
          
          .info-label,
          .meta-label {
            width: 70px;
            font-size: 13px;
          }
          
          .info-value,
          .meta-value {
            font-size: 13px;
          }
        }
      }
      
      .action-buttons {
        .action-btn {
          height: 40px;
          font-size: 13px;
        }
      }
    }
  }
} 